<template>
  <view class="container">
    <u-navbar title="邀请好友" :background="background"></u-navbar>
    <swiper
      @change="swiperChange"
      class="swiper"
      circular
      :indicator-dots="false"
      :autoplay="false"
      previous-margin="40rpx"
      next-margin="40rpx">
      <swiper-item class="swiper-item flex">
        <view class="swiper-box" id="canvasImg">
          <image :src="bgImageUrl" mode=""></image>
          <view class="ewm-box">
            <image :src="qrCodeUrl" mode=""></image>
            <text>邀请码：{{ inviteCode }}</text>
          </view>
        </view>
      </swiper-item>
      <swiper-item class="swiper-item flex">
        <view class="swiper-box">B</view>
      </swiper-item>
      <swiper-item class="swiper-item flex">
        <view class="swiper-box">C</view>
      </swiper-item>
    </swiper>
    <view class="rule">邀请规则</view>
    <view class="btns">
      <view>分享链接</view>
      <view @click="createImage">保存图片</view>
      <view class="share">分享海报</view>
    </view>
  </view>
  <canvas
    canvas-id="posterCanvas"
    style="width: 650px; height: 1040px; position: fixed; top: 0; left: 0; z-index: -1"></canvas>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app';
import { ref } from 'vue';

const background = { background: 'transparent' };

onLoad((options) => {
  const data = '123123213';
  qrCodeUrl.value = `https://api.qrserver.com/v1/create-qr-code/?size=110x110&data=${data}`;
});

const list = ref([1, 2, 3]);
const qrCodeUrl = ref('');
const swiperChange = (e) => {
  console.log(e.detail.current);
};
const bgImageUrl = ref('https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg');
const inviteCode = ref('123456789');
// 画海报
const createImage = () => {
  const ctx = uni.createCanvasContext('posterCanvas');
  // 加载背景图片
  uni.getImageInfo({
    src: bgImageUrl.value,
    success: (res) => {
      // 绘制背景图片
      // ctx.drawImage(res.path, 0, 0, res.width, res.height);
      ctx.drawImage(res.path, 0, 0, 650, 1040);

      // 加载二维码
      uni.getImageInfo({
        src: qrCodeUrl.value,
        success: (qrRes) => {
          // 绘制白色盒子背景，带圆角 宽高包含与二维码间距
          const boxX = 210; // 盒子X位置
          const boxY = 600 + 100; // 盒子Y位置
          const boxWidth = 220 + 40;
          const boxHeight = 220 + 40 + 40;
          const radius = 20; // 圆角半径

          // 绘制白色盒子，带圆角
          ctx.setFillStyle('#ffffff'); // 设置盒子背景为白色
          ctx.beginPath();
          ctx.moveTo(boxX + radius, boxY);
          ctx.arc(boxX + boxWidth - radius, boxY + radius, radius, 1.5 * Math.PI, 2 * Math.PI); // 右上角圆角
          ctx.arc(boxX + boxWidth - radius, boxY + boxHeight - radius, radius, 0, 0.5 * Math.PI); // 右下角圆角
          ctx.arc(boxX + radius, boxY + boxHeight - radius, radius, 0.5 * Math.PI, Math.PI); // 左下角圆角
          ctx.arc(boxX + radius, boxY + radius, radius, Math.PI, 1.5 * Math.PI); // 左上角圆角
          ctx.closePath(); // 闭合路径
          ctx.fill(); // 填充白色

          // 绘制二维码110x110
          ctx.drawImage(qrRes.path, boxX + 20, boxY + 20, 220, 220);

          // 绘制验证码文本
          ctx.setFillStyle('#333333');
          ctx.setFontSize(24);

          // 计算验证码的宽度，确保它水平居中
          const textWidth = ctx.measureText(`验证码: ${inviteCode.value}`).width;
          const textX = boxX + (boxWidth - textWidth) / 2; // 水平居中
          ctx.fillText(`验证码: ${inviteCode.value}`, textX, boxY + boxHeight + 10 - 30); // 绘制文本

          // 绘制并保存为图片
          ctx.draw(false, () => {
            saveImage();
          });
        },
      });
    },
  });
};
// 保存海报
const saveImage = () => {
  uni.canvasToTempFilePath({
    canvasId: 'posterCanvas',
    success: (res) => {
      const tempFilePath = res.tempFilePath;
      console.log('生成的图片路径：', tempFilePath);

      uni.saveImageToPhotosAlbum({
        filePath: tempFilePath,
        success() {
          uni.showToast({
            title: '图片已保存到相册',
            icon: 'success',
          });
        },
        fail(err) {
          console.error('保存失败：', err);
          uni.showToast({
            title: '保存失败',
            icon: 'none',
          });
        },
      });
    },
    fail: (err) => {
      console.error('生成图片失败：', err);
      uni.showToast({
        title: '生成图片失败',
        icon: 'none',
      });
    },
  });
};
</script>

<style scoped lang="scss">
.container {
  min-height: 100vh;
  background-image: url(~@/static/my/invite-bg.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-color: #fff;
  .swiper {
    margin-top: 48rpx;
    height: 1040rpx;
    .swiper-item {
      justify-content: center;
      .swiper-box {
        // width: calc(100% - 16px);
        width: 650rpx;
        height: 100%;
        background-color: hotpink;
        border-radius: 12px;
        overflow: hidden;
        position: relative;
        > image {
          width: 100%;
          height: 100%;
        }
        .ewm-box {
          position: absolute;
          bottom: 16px;
          left: 50%;
          transform: translateX(-50%);
          padding: 12px 12px 6px;
          background-color: #fff;
          border-radius: 10px;
          text-align: center;
          image {
            display: block;
            width: 110px;
            height: 110px;
            margin-bottom: 5px;
          }
          text {
            font-weight: 400;
            font-size: 12px;
            color: #333;
          }
        }
      }
    }
  }
  .rule {
    margin: 20px auto 32px;
    width: fit-content;
    color: #ff0309;
    font-weight: 400;
    font-size: 14px;
  }
  .btns {
    padding: 0 20px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    justify-content: space-between;
    view {
      border: 1px solid #ff0c1b;
      height: 50px;
      line-height: 48px;
      text-align: center;
      border-radius: 32px;
      color: #ff0c1b;
      font-weight: 500;
      font-size: 16px;
      &.share {
        background-color: #ff0c1b;
        color: #fff;
      }
    }
  }
}
</style>
